<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<fmt:setBundle basename="messages.messages"/>

<html>
<head>

<link rel="stylesheet" href="/Epics/jslib/global.css" />
<link rel="stylesheet" href="/Epics/jslib/jquery-ui.css" />
<script src="/Epics/jslib/jquery-1.9.1.js"></script>
<script src="/Epics/jslib/jquery-ui.js"></script>
<script src="/Epics/jslib/jquery.validate.min.js"></script>

<script type="text/javascript">
	$(document).ready(
			function() {
				$("#datepicker").datepicker({
					changeMonth : true,
					changeYear : true,
					dateFormat : 'dd/mm/yy'
				});
				
				$.validator.addMethod("datev", function(value, element) {
					return RegExp(
						'^$|(?:[0-9](?:[0-9])?\/[0-9](?:[0-9])?\/[0-9][0-9][0-9][0-9])$')
							.test(value);
				}, "Bad date format - dd/MM/yyyy.");
				
				$("#inputForm").validate({
					rules : {
						email : {
							required : true
						},
						password: {
							required : true
						},
						passwordAgain : {
							required : true,
						},
						firstName: {
							required : true
						},
						dateOfBirth : {
							 datev: true
						}
					},
					messages : {
						email :{
							required:"Type your email."
						},
						password : {
							required : "Type your password."
						},
						passwordAgain : {
							required : "Type your password."
						},
						firstName: {
							required : "Type your first name."
						},
						dateOfBirth : {
							 datev: "Bad date format - dd/MM/yyyy."
						}
					}
				});
			
				
				$("#inputForm").submit(
						function() {
							if ($("input[name=password]").val() == $(
									"input[name=passwordAgain]").val()) {
								return true;
							}
							$("p[id=printMessage]").text(
									"Password mismatch.").show();
							return false;
						});
			});
</script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><fmt:message key="siteName"/></title>
</head>
<body>
	<a href="SHome"><fmt:message key="home"/></a><br/>
	<%@ include file="../Template/TMessage.jsp"%>

	<c:if test="${empty user}">
	<form action="SRegisterOut"accept-charset="UFT-8" method="post" id="inputForm">
		<table>
			<tr>
				<td>Email:</td>
				<td><input type="text" name="email" /></td>
			</tr>
			<tr>
				<td>Password:</td>
				<td><input type="password" name="password" /></td>
			</tr>
			<tr>
				<td>Repeat password:</td>
				<td><input type="password" name="passwordAgain" /></td>
			</tr>
			<tr>
				<td>First name:</td>
				<td><input type="text" name="firstName" /></td>
			</tr>
			<tr>
				<td>Last name:</td>
				<td><input type="text" name="lastName" /></td>
			</tr>
			<tr>
				<td>Gender:</td>
				<td>
					<select name="gender">
					  <option value="M">Male</option>
					  <option value="F">Female</option>
					  <option value="O">Other</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>Date of birth:</td>
				<td><input type="text" id="datepicker" name="dateOfBirth" /></td>
			</tr>
			<tr>
				<td><input type="checkbox" name="notifications" value="notifications"/>Email notifications</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td colspan="2"><input type="submit" value="Register" /></td>
			</tr>
		</table>
	</form>
	</c:if>
</body>
</html>